{{extend 'layout.html'}}
<style type="text/css">
li.edititem {
    width:100%;
    /*background-color:LightYellow;*/
    margin-bottom:1em;
    }
ul.edititem {
    list-style-type:none;
    margin-bottom:2em;
    width:90%
    }
table.edititem {
    }
</style>          

<script type="text/javascript" src="{{=URL(request.application,'static','ckeditor/ckeditor.js')}}"></script>
<div id=pagehelpcontent class=hidden>
<h3><strong>{{=T("Page Help")}}</strong></h3>
<p>{{=T("Use this page to edit or create new descriptions for problems, solutions, and criteria.  The label for each item will be taken from the first line of the text, so choose a good, short title. The rest of the text can be a simple or elaborate as needed to describe the item to your collaborators.")}}</p>

<p>{{=T("If you are the creator of the problem and you haven't yet delivered the invitations, you can edit items later. After the invitations are delivered you and your collaborators can only add new solutions and criteria, so careful proofreading is in order before you click Submit.")}}</p>

<h3><strong>Editor Features</strong></h3>
<p>{{=T("The editor behaves much like a normal, albeit limited, word processor. You can format bold or italic text and make numbered or bulleted lists. You can also insert links to external web pages and images using the buttons provided.  The rightmost button, the one with the magnifying glass, allows you to see a more accurate preview of how your text will look. Clicking it will open a new tab or window in your browser. Remember to return to the original window to click Submit when you're satisfied with your description.")}}</p>  

<p>{{=T("You can also also use the Source button to view and edit the HTML markup for your description. For security reasons, only a small set of safe HTML tags are supported; others will be escaped when you click Submit.  We do support the object and embed tags sufficiently to allow you to embed video clips from YouTube or Vimeo.")}}</p>  
</div>
{{=form.custom.begin}}
<ul class=edititem>
<li class=edititem><h1>{{=title}}</h1></li>
{{
textarea = form.custom.widget.edited
textarea_id = textarea['_id']
}}
<li class=edititem>{{=textarea}}</li>
<script type="text/javascript">
    CKEDITOR.replace('{{=textarea_id}}', {
            toolbar : 'Basic'
        });
</script>    
<li class=edititem>{{=form.custom.submit}}</li>
</ul>
{{=form.custom.end}}
<hr>
{{#=BEAUTIFY(response._vars)}}
